<template>
  <transition name="fade" :duration="duration" @after-leave="handleAfterLeave">
    <div v-show="visible" ref="messageRef" class="tui-message" :class="[
      type,
      customClass,
      {
        'tui-message-plain': plain,
        'tui-message-show-close': showClose
      }
    ]" @mouseenter="clearTimer" @mouseleave="startTimer">
      <!-- 自定义图标或类型图标 -->
      <tui-icon v-if="icon" :icon="icon" class="tui-message-icon" />
      <tui-icon v-else :icon="getIconName()" class="tui-message-icon" />

      <!-- 消息内容 -->
      <div class="tui-message-content" v-if="!dangerouslyUseHTMLString">
        {{ message }}
      </div>
      <div v-else class="tui-message-content" v-html="message" />

      <!-- 关闭按钮 -->
      <button v-if="showClose" type="button" class="tui-message-closeBtn" aria-label="关闭" @click="close">
        <tui-icon icon="tui:close" />
      </button>

      <!-- 重复次数角标 -->
      <span v-if="grouping && repeatNum > 1" class="tui-message-badge">
        {{ repeatNum }}
      </span>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { TuiMessageProps } from './types';
import { timerManager, type TimerId } from '../../common/timer-manager';
import TuiIcon from '../icon/Icon.vue';

// 使用 withDefaults 定义 props
const props = withDefaults(defineProps<TuiMessageProps>(), {
  message: '',
  type: 'info',
  plain: false,
  icon: '',
  dangerouslyUseHTMLString: false,
  customClass: '',
  duration: 3000,
  showClose: false,
  onClose: () => { },
  offset: 16,
  placement: 'top',
  grouping: false,
  repeatNum: 1,
  pushTo: 'top'
});

// 监听repeatNum变化，确保UI正确更新
watch(() => props.repeatNum, (newNum) => {
  // repeatNum变化时不需要特殊处理，Vue会自动更新UI
}, { immediate: true });

const visible = ref(true);
const messageRef = ref<HTMLElement>();
let timer: TimerId | null = null;

// 获取图标名称
const getIconName = () => {
  const iconMap: Record<string, string> = {
    'success': 'tui:success',
    'warning': 'tui:alert',
    'info': 'tui:info',
    'error': 'tui:error'
  };
  return iconMap[props.type] || 'tui:info';
};

// 开始计时
const startTimer = () => {
  if (props.duration > 0) {
    timer = timerManager.addTimer(props.duration, () => {
      if (visible.value) {
        close();
      }
    });
  }
};

// 清除计时器
const clearTimer = () => {
  if (timer) {
    timerManager.removeTimer(timer);
    timer = null;
  }
};

// 关闭消息
const close = () => {
  visible.value = false;
};

// 处理动画结束
const handleAfterLeave = () => {
  props.onClose();
};

// 组件挂载时启动计时器
onMounted(() => {
  startTimer();
});

// 组件卸载时清除计时器
onBeforeUnmount(() => {
  clearTimer();
});
</script>

<script lang="ts">
export default {
  name: 'TuiMessage'
}
</script>

<style lang="scss" scoped>
.tui-message {
  min-width: 300px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  background-color: #fff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  word-break: break-word;
  z-index: 2000;
  position: relative;

  // 类型变体
  &.success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }

  &.warning {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c;
  }

  &.info {
    background-color: #edf2fc;
    border-color: #ebeef5;
    color: #909399;
  }

  &.error {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;
  }

  // 朴素样式
  &.tui-message-plain {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  }

  // 图标样式
  .tui-message-icon {
    font-size: 16px;
    margin-right: 8px;
  }

  // 内容样式
  .tui-message-content {
    flex: 1;
    line-height: 1.5;
    font-size: 14px;
  }

  // 关闭按钮样式
  .tui-message-closeBtn {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #C0C4CC;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    margin-left: 16px;
    opacity: 0.5;
    transition: opacity 0.2s;

    &:hover {
      opacity: 1;
    }
  }

  // 重复次数角标
  .tui-message-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background-color: #f56c6c;
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    white-space: nowrap;
    transform: scale(0.8);
  }
}

// 淡入淡出动画
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
</style>